<template>
        <div id="jnzAdd" class="container-fluid padding">
            <el-form :model="saveDatas" :rules="rules" ref="saveDatas" label-width="100px">
                <el-form-item label="技能组名称" prop="name">
                    <el-input v-model="saveDatas.name"></el-input>
                </el-form-item>
                <el-form-item label="拼音简码" prop="en">
                    <el-input v-model="saveDatas.en"></el-input>
                </el-form-item>
                <el-form-item label="话务级别" prop="level">
                    <el-select v-model="saveDatas.level">
                        <el-option v-for="item in levelOption" :key="item.id" :value="item.value" :label="item.text">{{item.text}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="响铃方式" prop="fpfs">
                    <el-select v-model="saveDatas.fpfs">
                        <el-option v-for="item in fpfsOption" :key="item.id" :value="item.value" :label="item.text">{{item.text}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话权限" prop="in_out">
                    <el-select v-model="saveDatas.in_out">
                        <el-option v-for="item in in_outOption" :key="item.id" :value="item.value" :label="item.text">{{item.text}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上班时间区间">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="saveDatas.timezone1"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30'
                            }">
                    </el-time-select>
                    <el-time-select
                            placeholder="结束时间"
                            v-model="saveDatas.timezone2"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30',
                              minTime: saveDatas.timezone1
                            }">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="技能等级" prop="skill_level">
                    <el-select v-model="saveDatas.skill_level">
                        <el-option v-for="item in skill_levelOption" :key="item.index" :value="item.value" :label="item.text">{{item.text}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="saveDatas.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save('saveDatas')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
</template>

<script>
    export default {
        name: "index",
        props:['saveDatas'],
        data() {
            return {
                index:"",
                laydate:"",
                levelOption: [
                    {text: '不可用', value: '1', temp: ""},
                    {text: '内线', value: '2', temp: ""},
                    {text: '市话', value: '3', temp: ""},
                    {text: '国内长途', value: '4', temp: ""},
                    {text: '国际长途', value: '5', temp: ""},
                ],
                fpfsOption: [
                    {text: '选择所有坐席，即让所有坐席振铃，那个先接就选择哪个。', value: 'ring-all', temp: ""},
                    {text: '选择空闲时间最长的坐席', value: 'long-idel-agent', temp: ""},
                    {text: '轮询', value: 'round-robin', temp: ""},
                    {text: '按固定的顺序选择', value: 'top-down', temp: ""},
                    {text: '总是选择通话时间最短的坐席', value: 'agent-with-least-talk-time', temp: ""},
                    {text: '总是选择接电话次数最少的坐席', value: 'agent-with-fewest-calls', temp: ""},
                    {text: '根据梯队和顺序选择', value: 'sequentially-by-agent-order', temp: ""},
                    {text: '随机选择', value: 'random', temp: ""},
                ],
                in_outOption: [
                    {text: '可接听', value: '0', temp: ""},
                    {text: '可接听、可打出', value: '1', temp: ""},
                ],
                skill_levelOption: [
                    {text: '第1级', value: 1, temp: ""},
                    {text: '第2级', value: 2, temp: ""},
                    {text: '第3级', value: 3, temp: ""},
                    {text: '第4级', value: 4, temp: ""},
                    {text: '第5级', value: 5, temp: ""},
                    {text: '第6级', value: 6, temp: ""},
                    {text: '第7级', value: 7, temp: ""},
                    {text: '第8级', value: 8, temp: ""},
                    {text: '第9级', value: 9, temp: ""},
                    {text: '第10级', value: 10, temp: ""},
                ],
                rules:{
                    name:[
                        { required: true, message: '请输入技能组名称', trigger: 'blur' },
                    ],
                    en:[
                        { required: true, message: '请输入拼音简码', trigger: 'blur' },
                    ],
                    level:[
                        { required: true, message: '请选择话务级别', trigger: 'blur' },
                    ],
                    fpfs:[
                        { required: true, message: '请选择响铃方式', trigger: 'blur' },
                    ],
                }
            }
        },
        methods: {
            save:function (saveDatas) {
                this.$refs[saveDatas].validate((valid)=>{
                    if (valid){
                        this.$post('cti-manager-jnz/save',{data:{CtiJnz:this.saveDatas}})
                            .then((response) => {//这里使用了ES6的语法
                                if (response.data == 1) {
                                    allSuccess = 'success'
                                    this.$message({message:"新增成功！",type:"success"})
                                }else if (response.data == 2) {
                                    allSuccess = 'success'
                                    this.$message({message:"修改成功！",type:"success"})
                                }else if (response.data == 3) {
                                    allSuccess = 'faild'
                                    this.$message({message:"修改失败！",type:"success"})
                                }else {
                                    allSuccess = 'faild'
                                    this.$message({message:"新增失败！",type:"success"})
                                }
                                layer.close(allIndex)
                            }).catch((response) => {
                            allSuccess = 'faild'
                            consoleLog(response)
                        });
                    } else{
                        return false;
                    }
                })
            },
        }
    }
</script>